<template>
  <ContentField>
    <a-row>
      <a-col :span="2">
        <a-avatar :size="64" :src="userinfo.avatar">
          <template #icon><UserOutlined /></template>
        </a-avatar>
      </a-col>
      <a-col :span="21" :offset="1">
        <h1>{{ userinfo.username }}</h1>
      </a-col>
      <a-col :span="24">
        <a-row justify="center">
          <a-col :span="6">
            <span class="font-x">访问量:</span>
            <span class="title">{{ userinfo.visitCount }}</span>
          </a-col>
          <a-col :span="6">
            <span class="font-x">关注数：</span>
            <span class="title">{{ userinfo.concernCount }}</span>
          </a-col>
          <a-col :span="6">
            <span class="font-x">粉丝数:</span>
            <span class="title">{{ userinfo.followerCount }}</span>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-button
          type="primary"
          v-if="is_gz"
          @click="addFollower()"
          style="margin: 8px"
        >
          + 关注
        </a-button>

        <a-button v-if="!is_gz" @click="reduceFollower()" style="margin: 10px">
          已关注
        </a-button>

        <a-button @click="send()">发消息</a-button>
      </a-col>
    </a-row>
  </ContentField>
</template>

<script>
//我的空间 个人信息卡片
import ContentField from "@/components/ContentField";
import { useRoute } from "vue-router";
import followerApi from "@/apis/followerApi";
import store from "@/store";
import { ref } from "@vue/reactivity";
import router from "@/router";
import { message } from "ant-design-vue";
export default {
  name: "UserCard",
  components: {
    ContentField,
  },
  props: {
    userinfo: {
      type: Object, //类型
      required: true, //必要性
    },
  },
  setup(props, context) {
    const route = useRoute();
    const access = store.state.user.info.access;
    const userId = route.params.userId;

    const is_gz = ref(false);

    const flagFollower = () => {
      followerApi.flagFollower(userId, access).then((resp) => {
        is_gz.value = resp.data.flag;
      });
    };

    flagFollower();

    const addFollower = () => {
      followerApi.addFollower(userId, access).then((resp) => {
        if (resp.code === 200) {
          is_gz.value = false;
          context.emit("addfollowerCount");
        }
      });
    };

    const reduceFollower = () => {
      followerApi.reduceFollower(userId, access).then((resp) => {
        if (resp.code === 200) {
          is_gz.value = true;
          context.emit("reducefollowerCount");
        }
      });
    };

    const send = () => {
      if (is_gz.value === true) {
        message.warn("您和他不是好友，关注后重试！");
        return;
      }
      router.push({ name: "message" });
    };

    return {
      is_gz,
      addFollower,
      reduceFollower,
      send,
    };
  },
};
</script>

<style scoped>
.title {
  color: #222226;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  margin: 4px;
}

.font-x {
  color: #555666;
  font-size: 14px;
  line-height: 16px;
  margin-top: 2px;
  white-space: nowrap;
}
</style>